/**
 * 学习目标：使用ref-获取组件的实例对象
 */
import React from 'react';
import ReactDOM from 'react-dom';

class App extends React.Component {
  // 1. 创建ref
  childRef = React.createRef();

  render() {
    return (
      <div>
        {/*  2. 绑定ref 给子组件*/}
        <Child ref={this.childRef}></Child>
        <button onClick={this.handleClick}>点我访问CHild的方法</button>
      </div>
    );
  }

  handleClick = () => {
    // 3. 通过ref对象.current 获取到组件实例或者DOM
    this.childRef.current.handleShowAlert();
    console.log('this.childRef.current.state.msg  ----->  ', this.childRef.current.state.msg);
  };
}

class Child extends React.Component {
  state = {
    msg: '123',
  };
  handleShowAlert() {
    alert('我是Child，我被触发了');
  }
  render() {
    return <div>Child组件</div>;
  }
}
ReactDOM.render(<App></App>, document.getElementById('root'));
